<html>
<head>
    <title>风险责任清单</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        img {
            width: 30px;
            width: 32px;
        }

        td {
            text-align: center;
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        td[class=first] {
            width: 100px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 160px;
            top: 0;
            left: 0;
            background-color: #000;
            display: block;
            transform: rotate(-73deg);
            transform-origin: top;
            -ms-transform: rotate(-73deg);
            -ms-transform-origin: top;
        }

        .title1 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title2 {
            position: absolute;
            top: 26px;
            right: 70px;
        }

        .chart-wrap {

            height: 700px;
            width: 100%;
        }

    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">风险管理 › 风险作业活动对比图</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div style="text-align: center;background: white;padding-top: 15px">
                    <el-button-group>
                        <el-button type="danger">重大风险</el-button>
                        <el-button type="warning">较大风险</el-button>
                        <el-button style="background: yellow">一般风险</el-button>
                        <el-button type="primary">低风险</el-button>
                    </el-button-group>
                </div>

                <div id="chart_bar" class="chart-wrap"></div>
            </el-col>
        </el-row>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>

<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            risk_list: [],
        },
        methods: {
            getRisk() {
                HttpUtil.get('Risk/List', {projectNo: SiteConfig.account.projectNo, pagesize: 200}).success((res) => {
                    res.data.sort(this.keysrt('grade', false, parseInt))
                    let data = {
                        xdata: [],
                        ydata: [],
                    }

                    for (let item of res.data) {
                        data.xdata.push(item.riskName);
                        data.ydata.push(item.grade);
                    }


                    this.drawChart(data);
                });
            },
            drawChart(data) {
                let mychart = echarts.init(document.getElementById('chart_bar'));
                option = {
                    title: {
                        text: '风险作业比较图',
                        subtext: ''
                    },
                    grid:{

                        bottom:100
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: data.xdata,
                        axisLabel: {
                            textStyle: {
                                fontSize: 18,
                                fontFamily:'serif',
                                fontWeight:900,
                            },
                            interval:0,
                            rotate:-40
                        },
                    },
                    yAxis: {
                        type: 'value',
                    },

                    series: [{
                        data: data.ydata,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                //这里是重点
                                color: function (params) {
                                    //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                    let colorList = ['red', 'orange', 'yellow', 'blue'];
                                    if (params.data == 1) {
                                        return 'red';
                                    } else if (params.data == 2) {
                                        return 'orange'
                                    } else if (params.data == 3) {
                                        return 'yellow'
                                    } else if (params.data == 4) {
                                        return 'blue'
                                    }
                                }
                            }
                        }
                    }]
                };
                mychart.setOption(option);
            },
            // 排序方法
            keysrt(filed, rev, primer) {
                rev = (rev) ? -1 : 1;
                return function (a, b) {
                    a = a[filed];
                    b = b[filed];
                    if (typeof (primer) != 'undefined') {
                        a = primer(a);
                        b = primer(b);
                    }
                    if (a < b) {
                        return rev * -1;
                    }
                    if (a > b) {
                        return rev * 1;
                    }
                    return 1;
                }
            }
        },
        created: function () {
            this.getRisk();
        },
        mounted: function () {


        }
    });


</script>

</body>
</html>
